<template>
  <div>
    <el-card>
      <div slot="header" class="header">
        <div class="title">分类销售排行</div>
        <div class="radio">
          <el-radio-group v-model="radio2" size="small">
            <el-radio-button label="品类"></el-radio-button>
            <el-radio-button label="商品"></el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="main">
        <v-chart :options="getOptions()" autoresize></v-chart>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "RankView",
  data() {
    return {
      radio2: "品类"
    };
  },
  methods: {
    getOptions() {
      let { allDatasNum, useData } = this.useData;
      return {
        title: [
          {
            text: this.radio2 === "品类" ? "品类分布" : "商品分布",
            left: "5%",
            textStyle: {
              fontSize: 14
            }
          },
          {
            text: "累积订单量",
            subtext: allDatasNum,
            left: "30%",
            top: "43%",
            textStyle: {
              fontSize: 14
            },
            subtextStyle: {
              fontSize: 28,
              color: "#333"
            },
            textAlign: "center"
          }
        ],
        legend: {
          top: "35%",
          left: "60%",
          orient: "vertical"
        },
        tooltip: {
          trigger: "item",
          formatter: params => {
            // console.log(params);
            return `${this.radio2}分布 <br>
            ${params.marker}名称：${params.name.split("|")[0]}<br>
            ${params.marker}数量：${params.value}<br>
            ${params.marker}占比：${params.percent}
            `;
          }
        },
        itemStyle: {
          labelLine: {
            length: 5,
            length2: 5
          }
        },
        series: [
          {
            type: "pie",
            center: ["30%", "50%"],
            radius: ["35%", "50%"],
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2
            },
            data: useData,
            labelLine: {
              length: 5,
              length2: 5
            },
            label: {
              formatter(params) {
                return params.name.split("|")[0];
              }
            }
          }
        ]
      };
    }
  },
  computed: {
    ...mapState({
      saleRank: state => state.echarts.echartsData.saleRank || {}
    }),
    saleData() {
      if (this.radio2 === "品类") {
        let names1 = this.saleRank.category?.axisX || [];
        let datas1 = this.saleRank.category?.data1 || [];
        return { names1, datas1 };
      } else {
        let names1 = this.saleRank.goods?.axisX || [];
        let datas1 = this.saleRank.goods?.data1 || [];
        return { names1, datas1 };
      }
    },
    useData() {
      if (this.saleData) {
        let { names1, datas1 } = this.saleData;
        let allDatasNum = datas1.reduce((p, c) => {
          p += c;
          return p;
        }, 0);
        let useData = names1.map((item, index) => {
          return {
            name:
              item +
              "|" +
              ((datas1[index] * 100) / allDatasNum).toFixed(2) +
              "%",
            value: datas1[index]
          };
        });
        return {
          allDatasNum,
          useData
        };
      } else {
        return {};
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
::v-deep .el-card__header {
  padding: 11.5px 20px;
}
.main {
  height: 443px;
}
</style>
